<!DOCTYPE html>
<html>
<head>
    <title>Add friend</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <link rel='stylesheet' href='//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css'/>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>

<div id="error-box"></div>
<input type="hidden" id="onlinerId" value="<%= onlinerId %>"/>
<input type="hidden" id="ownerId" value="<%= ownerId %>"/>
<input type="hidden" id="userId" value="<%= userId %>">

<% if(ownerId == onlinerId){ %>
    <!-- notification -->
    <div id="notification-box">
        <button id="notification-count" style="color:red"><%= count %></button>
        <ul id="notification-list" style="display: none">
            <!-- notification list -->
        </ul>
    </div>
<% }else{ %>
    <% if(status == 'isAdded'){ %>
        <button class="btn btn-warning add-friend-btn" id="unfriend">Unfriend</button>
        <button class="btn btn-primary add-friend-btn" id="add-friend" style="display:none"><i class="fa fa-plus"></i> Add friend</button>
        <button class="btn btn-default add-friend-btn" id="loading" style="display:none" disabled><i class="fa fa-refresh fa-spin"></i> loading... </button>
    <% } if(status == 'isWaiting'){ %>
        <button class="btn btn-danger add-friend-btn" id="cancel-request">Cancel request</button>
        <button class="btn btn-primary add-friend-btn" id="add-friend" style="display:none"><i class="fa fa-plus"></i> Add friend</button>
        <button class="btn btn-warning add-friend-btn" id="unfriend" style="display:none">Unfriend</button>
        <button class="btn btn-default add-friend-btn" id="loading" style="display:none" disabled><i class="fa fa-refresh fa-spin"></i> loading... </button>
    <% } if(status == 'isUnknown') { %>
        <button class="btn btn-primary add-friend-btn" id="add-friend"><i class="fa fa-plus"></i> Add friend</button>
        <button class="btn btn-danger add-friend-btn" id="cancel-request" style="display:none">Cancel request</button>
        <button class="btn btn-default add-friend-btn" id="confirm" style="display:none">Confirm request</button>
        <button class="btn btn-warning add-friend-btn" id="unfriend" style="display:none">Unfriend</button>
        <button class="btn btn-default add-friend-btn" id="loading" style="display:none" disabled><i class="fa fa-refresh fa-spin"></i> loading... </button>
    <% } if(status == 'isWaitForConfirm'){ %>
        <button class="btn btn-default add-friend-btn" id="confirm">Confirm request</button>
        <button class="btn btn-warning add-friend-btn" id="unfriend" style="display:none">Unfriend</button>
        <button class="btn btn-default add-friend-btn" id="loading" style="display:none" disabled><i class="fa fa-refresh fa-spin"></i> loading... </button>
    <% } %>
<% } %>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="/socket.io/socket.io.js"> </script>
<script src="/javascripts/socket/io.config.js"></script>
<script src="/javascripts/socket/io.friendRequest.js"></script>
<script src="/javascripts/addFriend.js"></script>
<script src="/javascripts/friendRequestNotification.js"></script>
</body>
</html>